<script lang="ts" setup>
import { useVbenModal, VbenButton } from '@vben/common-ui';
import { h, ref } from 'vue';
import { Input, message, Select, FormItem } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { getCompanyList, doPurchaseExportContract } from '#/api/purchase';

const onSubmit = async (values: any) => {
  const id_arr = modalApi.getData<Record<string, any>>();
  doPurchaseExportContract({ ...values, ...id_arr }).then((res) => {
    console.log('res', res);
    message.success('导出成功');
    window.open(res.oss_file_path, '_blank');
    modalApi.close();
  });
};

const [Modal, modalApi] = useVbenModal({
  footer: false,
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      init();
    }
  },
});

// 公司列表数据
const purchaseCompanyList = ref<any[]>([]);

const init = async () => {
  const list = await getCompanyList({});
  purchaseCompanyList.value = list.map((item: any) => ({
    value: item.id,
    label: item.name,
  }));
};

// 要求条款选项
const requireTerms = [
  {
    label: '裤子要求1',
    value: 'kz1',
  },
  {
    label: '内搭要求1',
    value: 'nd1',
  },
];

const [Form, formApi] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  //   showDefaultActions: false,
  handleSubmit: onSubmit,

  // 水平布局，label和input在同一行
  layout: 'horizontal',
  schema: [
    {
      component: 'Select',
      fieldName: 'contract_type',
      defaultValue: '3',
      label: '合同模板',
      rules: 'required',
      componentProps: {
        placeholder: '选择合同模板',
        options: [
          { label: '面料订单合同', value: '3' },
          { label: '辅料订单合同', value: '11' },
          { label: '面料框架合同', value: '2' },
          { label: '纱线框架合同', value: '4' },
          { label: '辅料框架合同', value: '5' },
          { label: '胚布框架合同', value: '6' },
          { label: '织面料订单合同', value: '8' },
          { label: '纱料订单合同', value: '9' },
          { label: '胚布订单合同', value: '10' },

        ],
      },
    },
    {
      component: 'Select',
      fieldName: 'is_old_type',
      defaultValue: '0',
      label: '导出方式',
      rules: 'required',
      componentProps: {
        placeholder: '选择导出方式',
        options: [
          { label: '新报单', value: '0' },
          { label: '旧报单', value: '1' },
        ],
      },
    },
    {
      component: 'Select',
      fieldName: 'is_merge',
      defaultValue: '1',
      label: '是否合并',
      rules: 'required',
      componentProps: {
        placeholder: '选择同一供应商是否合并到同一合同',
        options: [
          { label: '同一供应商合并到一个合同', value: '1' },
          { label: '一条数据一个合同', value: '0' },
        ],
      },
    },
    {
      component: 'Select',
      fieldName: 'is_show_pay',
      defaultValue: '1',
      label: '付款方式',
      rules: 'required',
      componentProps: {
        placeholder: '选择是否显示付款方式',
        options: [
          { label: '显示付款方式', value: '1' },
          { label: '不显示付款方式', value: '0' },
        ],
      },
    },
    {
      component: 'Select',
      fieldName: 'company_name',
      label: '合同抬头',
      rules: 'required',

      componentProps: {
        placeholder: '选择合同抬头',
        options: purchaseCompanyList,

        showSearch: true,
        filterOption: (input: string, option: any) => {
          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
        },
      },
    },
    {
      component: 'Select',
      fieldName: 'requireTerm',
      label: '合同要求',
      componentProps: {
        placeholder: '合同要求',
        options: requireTerms,
        mode: 'multiple',
      },
    },
  ],
  wrapperClass: 'grid-cols-1',
});
</script>

<template>
  <Modal class="w-[600px]" title="导出合同">
    <Form>
      <template #field3="slotProps">
        <Input placeholder="请输入" v-bind="slotProps" />
      </template>
    </Form>
  </Modal>
</template>
